<template>
  <div class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">补充信息</h3>
      </div>
      <div class="box-body">
        <el-form :model="editExtrabaseinfo" :rules="rules" ref="editExtrabaseinfo" label-width="200px">
          <el-row>
            <div class="col-md-6">
              <el-form-item label="首次聘任现职时间">
                <MyDatePicker :editable="isEditable" v-bind:date="editExtrabaseinfo.fistengagetime" @timeChanged="(time)=>this.editExtrabaseinfo.fistengagetime =time">
                </MyDatePicker>
                <!-- <el-date-picker :disabled="!isEditable" :month="1" v-model="editExtrabaseinfo.fistengagetime" @change="time=>this.editExtrabaseinfo.fistengagetime =time" type="month" placeholder="副科及以上填写">
                </el-date-picker> -->
              </el-form-item>
            </div>
            <div class="col-md-6">
              <el-form-item label="最新聘任现职时间">
                <MyDatePicker :editable="isEditable" v-bind:date="editExtrabaseinfo.engageLastTime" @timeChanged="(time)=>this.editExtrabaseinfo.engageLastTime =time">
                </MyDatePicker>
                <!-- <el-date-picker :disabled="!isEditable" :month="1" v-model="editExtrabaseinfo.engageLastTime" @change="time=>this.editExtrabaseinfo.engageLastTime =time" type="month" placeholder="副科及以上填写">
                </el-date-picker> -->
              </el-form-item>
            </div>
          </el-row>
          <el-row>
            <div class="col-md-6">
              <el-form-item label="技术工人岗位">
                <el-input :disabled="!isEditable" type="text" v-model="editExtrabaseinfo.skillworkerdepart" placeholder="工勤人员填写" style="width: 200px;"></el-input>
              </el-form-item>
            </div>
            <div class="col-md-6">
              <el-form-item label="技术工人岗位聘任时间">
                <div class="col-md-6">
                  <MyDatePicker :editable="isEditable" v-bind:date="editExtrabaseinfo.skillworkerEngageTime" @timeChanged="(time)=>this.editExtrabaseinfo.skillworkerEngageTime =time">
                  </MyDatePicker>
                  <!-- <el-date-picker :disabled="!isEditable" :month="1" v-model="editExtrabaseinfo.skillworkerEngageTime" @change="time=>this.editExtrabaseinfo.skillworkerEngageTime =time" type="month" placeholder="工勤人员填写">
                  </el-date-picker> -->
                </div>
              </el-form-item>
            </div>
          </el-row>
          <el-row>
            <div class="col-md-6">
              <el-form-item label="退休时间">
                <MyDatePicker :editable="isEditable" v-bind:date="editExtrabaseinfo.retiretime" @timeChanged="(time)=>this.editExtrabaseinfo.retiretime =time">
                </MyDatePicker>
                <!-- <el-date-picker :disabled="!isEditable" :month="1" v-model="editExtrabaseinfo.retiretime" @change="time=>this.editExtrabaseinfo.retiretime =time" type="month" placeholder="退休人员填写">
                </el-date-picker> -->
              </el-form-item>
            </div>
            <div class="col-md-6">
              <el-form-item label="连续工龄">
                <el-input-number :min="0" :max="70" :disabled="!isEditable" v-model='editExtrabaseinfo.workage' placeholder="退休人员填写" style="width: 200px;"></el-input-number>
              </el-form-item>
            </div>
          </el-row>
          <el-row>
            <div class="col-md-6">
              <el-form-item label="首次签订合同时间">
                <MyDatePicker :editable="isEditable" v-bind:date="editExtrabaseinfo.firstsigntime" @timeChanged="(time)=>this.editExtrabaseinfo.firstsigntime =time">
                </MyDatePicker>
                <!-- <el-date-picker :disabled="!isEditable" :month="1" v-model="editExtrabaseinfo.firstsigntime" @change="time=>this.editExtrabaseinfo.firstsigntime =time" type="month" placeholder="劳务派遣人员填写">
                </el-date-picker> -->
              </el-form-item>
            </div>
            <div class="col-md-6">
              <el-form-item label="最新签订合同时间">
                <MyDatePicker :editable="isEditable" v-bind:date="editExtrabaseinfo.lastsigntime" @timeChanged="(time)=>this.editExtrabaseinfo.lastsigntime =time">
                </MyDatePicker>
                <!-- <el-date-picker :disabled="!isEditable" :month="1" v-model="editExtrabaseinfo.lastsigntime" @change="time=>this.editExtrabaseinfo.lastsigntime =time" type="month" placeholder="劳务派遣人员填写">
                </el-date-picker> -->
              </el-form-item>
            </div>
          </el-row>
          <el-row>
            <div class="col-md-6">
              <el-form-item label="离职时间">
                <MyDatePicker :editable="isEditable" v-bind:date="editExtrabaseinfo.lefttime" @timeChanged="(time)=>this.editExtrabaseinfo.lefttime =time">
                </MyDatePicker>
                <!-- <el-date-picker :disabled="!isEditable" :month="1" v-model="editExtrabaseinfo.lefttime" @change="time=>this.editExtrabaseinfo.lefttime =time" type="month" placeholder="请输入离职时间">
                </el-date-picker> -->
              </el-form-item>
            </div>
            <div class="col-md-6">
              <el-form-item label="婚姻状况" :required="true">
                <el-select :disabled="!isEditable" v-model="editExtrabaseinfo.married">
                  <el-option v-for="item in this.$store.state.sysconfigs.married" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-row>
          <el-row>
            <div class="col-md-6">
              <el-form-item label="户籍所在地" prop="domicile" :required="true">
                <el-input :disabled="!isEditable" type="text" v-model="editExtrabaseinfo.domicile" placeholder="请输入户籍所在地" style="width: 200px;"></el-input>
              </el-form-item>
            </div>
            <div class="col-md-6">
              <el-form-item label="档案所在地">
                <el-input :disabled="!isEditable" type="text" v-model="editExtrabaseinfo.docloc" placeholder="请输入档案所在地" style="width: 200px;"></el-input>
              </el-form-item>
            </div>
          </el-row>
          <el-row>
            <div class="col-md-6">
              <el-form-item label="手机号码" prop="phone" :required="true">
                <el-input ref='phone' :disabled="!isEditable" type="text" v-model='editExtrabaseinfo.phone' placeholder="请输入手机号码" style="width: 200px;"></el-input>
              </el-form-item>
            </div>
            <div class="col-md-6">
              <el-form-item label="办公电话" prop="tel" :required="true">
                <el-input ref='tel' :disabled="!isEditable" type="text" v-model='editExtrabaseinfo.tel' placeholder="请输入办公电话" style="width: 200px;"></el-input>
              </el-form-item>
            </div>
          </el-row>
          <el-row>
            <div class="col-md-6">
              <el-form-item label="QQ号">
                <el-input ref='QQ' :disabled="!isEditable" type="text" v-model='editExtrabaseinfo.qq' placeholder="请输入QQ号码" style="width: 200px;"></el-input>
              </el-form-item>
            </div>
            <div class="col-md-6">
              <el-form-item label="兴趣爱好及特长">
                <el-input ref='likes' :disabled="!isEditable" type="text" v-model='editExtrabaseinfo.likes' placeholder="请输入兴趣爱好及特长"></el-input>
              </el-form-item>
            </div>
          </el-row>
          <el-row>
            <div class="col-md-8">
              <el-form-item label="家庭住址">
                <el-input ref='address' :disabled="!isEditable" type="text" v-model='editExtrabaseinfo.address' placeholder="请输入家庭住址"></el-input>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import MyDatePicker from '../common/MyDatePicker'
  export default {
    name: 'ExtraBaseInfo',
    props: ['extrabaseinfo', 'editable'],
    data: function() {
      return {
        rules: {
          domicile: [{
            required: true,
            message: "请输入户籍所在地",
            trigger: "blur"
          }],
          phone: [{
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          }],
          tel: [{
            required: true,
            message: "请输入办公电话",
            trigger: "blur"
          }]
        },
        isEditable: true,
        editExtrabaseinfo: {
          firstsigntime:'',
          fistengagetime:'',
          engageLastTime:'',
          skillworkerdepart:'',
          skillworkerEngageTime:'',
          retiretime:'',
          workage:1,
          lastsigntime:'',
          lefttime:'',
          married:0,
          domicile:'',
          docloc:'',
          phone:'',
          tel:'',
          qq:'',
          likes:'',
          address:''
        }
      }
    },
    components: {
      MyDatePicker
    },
    methods: {
      getData() {
        var validRes = true
        this.$refs.editExtrabaseinfo.validate((valid) => {
          if (valid) {
            validRes = true
          } else {
            console.log('editExtrabaseinfo validate failed!!!');
            validRes = false
            return false;
          }
        });
        console.log("editExtrabaseinfo:", JSON.stringify(this.editExtrabaseinfo));
        if (!validRes) {
          return null
        }
        return this.editExtrabaseinfo
      }
    },
    created: function() {
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      if(this.extrabaseinfo){
        for(var prop in this.extrabaseinfo){
          this.editExtrabaseinfo[prop]=this.extrabaseinfo[prop]
        }
      }
    }
  }
</script>
